<template>
	<div class="root">
		<img src="../assets/logo.png" alt="">
		<van-cell-group>
		  <van-field
		    v-model="phone"
		    center
		    clearable
		    placeholder="手机号"
		  >
		  
		    <van-button slot="button" size="small" type="primary" :disabled="disabled"
			 @click="getImgCode">{{countDown?('已发送('+countDown+')'):"获取验证码"}}</van-button>

			 
		  </van-field>
		  <van-field
		    v-model="msgCode"
		    center
		    clearable
		    placeholder="验证码"
		  >
		  </van-field>
		  <van-button round type="info" @click="Login">登录</van-button>

		</van-cell-group>
		<br>
 <van-button round type="primary" @click="back">返回</van-button>
		<van-dialog
		  v-model="showdialog"
		  title="输入验证码"
		  show-cancel-button
		  :beforeClose="getMsgCode"
		>
		
		  <img :src="imgSrc">
		  <van-field v-model="inputImgCode" placeholder="验证码" />
		</van-dialog>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		mounted(){
			
			if(this.$store.state.isLogin == true){
				this.$store.dispatch("getAvatar")
			}
		},
		data(){
			return {
				countDown:0,
				timer:null,
				disabled:false,
				phone:"15670340680",
				msgCode:"",
				showdialog:false,
				inputImgCode:"",
				captcha_hash:"",
				imgSrc:"",
				validate_token:""
			}
		},
		methods:{
			back(){
				history.back()
			},//圖形驗證碼
			getImgCode(){
				this.inputImgCode =""
				 axios.post("/ele/restapi/eus/v3/captchas",{captcha_str:this.phone})
				 						.then(res =>{
				 							this.imgSrc = res.data.captcha_image
				 							this.captcha_hash =  res.data.captcha_hash
				 						})
				this.showdialog = true
				// this.$store.dispatch("getMsgCode",{phone:this.phone})
			},
			//获取短信验证码
			getMsgCode(action, done) {
					  if (action === 'confirm') {
							axios.post("/ele/restapi/eus/login/mobile_send_code",{captcha_hash:this.captcha_hash,captcha_value:this.inputImgCode,mobile:this.phone,scf:"ms"})
							.then(res=>{
							    console.log('res=>',res);            
									this.validate_token = res.data.validate_token
									
								
							})
								done();
								this.disabled = true
								this.countDown = 3
								this.timer = setInterval(() => {
									this.countDown--
									if (this.countDown == 0) {
										clearInterval(this.timer)
										this.timer = null
										this.disabled = false
									}
								}, 1000);
								
					  } else {
						done();
					  }
					},
			Login(){
				this.$store.dispatch("Login",{phone:this.phone,msgCode:this.msgCode,validate_token:this.validate_token})
				this.$router.push("/")
			}
		}
	}
</script>

<style>
	img{
		display: block;
		width: 40%;
		margin: 20px auto;
	}
	.van-button{
		width: 100%;
	}
	.root{
		width: 80%;
		margin: 10px auto;
	}
	van-button{
		margin: 10px;
	}
</style>
